<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/dataTables.bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrapValidator.min.css}" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>


<main class="container-fluid">
    <form action="api/down-task" method="post">
        <div class="form-group">
            <label for="downUrl">下载地址</label>
            <input name="downUrl" type="text" class="form-control" id="downUrl" placeholder="http://">
        </div>
        <!--<div class="form-group">-->
            <!--<label for="name">文件名称</label>-->
            <!--<input name="name" type="text" class="form-control" id="name" placeholder="文件名称">-->
        <!--</div>-->
        <div class="checkbox">
            <label>
                <input type="checkbox" name="transcoding"> 下载完成后立即转码
            </label>
        </div>
        <button type="submit" class="btn btn-primary">提交任务</button>
    </form>

</main>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/js/layer.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/bootstrapValidator.js}"></script>
<script th:src="@{/js/language/zh_CN.js}"></script>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/dataTables.bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.spring-friendly.min.js}"></script>

<script>
    $(document).ready(function () {
        var form=$("form")
        form.bootstrapValidator({
//            submitButtons: 'button[type="submit"]',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            submitHandler: function (form) {
                // 实用ajax提交表单
                $.post(form.attr('action'), form.serialize(), function (result) {
                    // .自定义回调逻辑
                    console.log(result)
                }, 'json');
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            /*非空提示*/
                            message: '文件名称不能为空'
                        }
                    }
                },
                downUrl: {
                    validators: {
                        notEmpty: {
                            /*非空提示*/
                            message: '下载地址不能为空'
                        },
                        url: {
                            /*非空提示*/
                            message: '下载地址格式不正确'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                layer.alert(result.msg,function(){
                    parent.layer.closeAll();
                    parent.document.getElementById('autoRefresh').checked=true;
                    parent.autoRefresh();
                });
            }, 'json');
        });

    });
</script>
</body>
</html>
